<template>
  <div class="home">
    <el-container>
      <!--顶部导航栏-->
      <el-header>
        <a-row type="flex" justify="space-between">
          <!--左侧logo,标题，菜单折叠控制按钮-->
          <a-col :span="6">
            <img src="../assets/logo.png" style="width: 1.5vw; margin-top: -0.5vh" alt="集团logo">
            <el-link :underline = "false" style="margin-top: -0.5vh">
              <span style="font-family: 黑体,ui-serif; font-size: 0.85vw; color: #CD853F; font-weight: bolder; user-select: none">七月酒店管理系统</span>
            </el-link>
            <el-link :underline="false" style="margin-left: 1.8vw">
              <i v-show="isCollapse" class="fa-solid fa-indent isCollapse" @click="isCollapse = !isCollapse"></i>
              <i v-show="!isCollapse" class="fa-solid fa-outdent isCollapse" @click="isCollapse = !isCollapse"></i>
            </el-link>
          </a-col>
          <!--右侧登陆用户信息框-->
          <a-col :span="6" align="right">
            <el-dropdown >
              <div>
                <a-avatar shape="square" style="width: 1.8vw; height: 1.8vw;"></a-avatar>
                <span class="el-dropdown-link">
                  {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="center">个人中心</el-dropdown-item>
                <el-dropdown-item divided command="logout">安全退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </a-col>
        </a-row>
      </el-header>
      <el-container>
        <!--菜单栏-->
        <el-menu default-active="1-4-1" :collapse="isCollapse" background-color="#191970" text-color="#ffffff" router>
          <template v-for="(item, index) in menuDatas">
            <!--一级菜单-->
            <el-menu-item v-if="!item.children" :index="item.path">
              <i :class="item.iconClass"></i> {{item.name}}
            </el-menu-item>
            <el-submenu v-else :index="'first'+ index">
              <template slot="title">
                <i :class="item.iconClass"></i>
                <span slot="title"> {{item.name}}</span>
              </template>
              <!--二级菜单-->
              <template v-for="(it, ind) in item.children">
                <el-menu-item v-if="!it.children" :index="it.path">
                  <i :class="it.iconClass"></i> {{it.name}}
                </el-menu-item>

                <el-submenu v-else :index="'second'+ind">
                  <template slot="title">
                    <i :class="it.iconClass"></i>
                    <span slot="title"> {{it.name}}</span>
                  </template>
                  <!--三级菜单-->
                  <template v-for="(i,id) in it.children" :index="'thid'+ind">
                    <el-menu-item :index="i.path">
                      <i :class="i.iconClass"></i> {{i.name}}
                    </el-menu-item>
                  </template>
                </el-submenu>

              </template>

            </el-submenu>

          </template>
          <!--          <el-submenu index="1">
                      <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title">导航一</span>
                      </template>

                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                        <el-menu-item index="1-3">选项3</el-menu-item>
                      <el-submenu index="1-4">
                        <span slot="title">选项4</span>
                        <el-menu-item index="1-4-1">选项1</el-menu-item>
                      </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                      <i class="el-icon-menu"></i>
                      <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                      <i class="el-icon-document"></i>
                      <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                      <i class="el-icon-setting"></i>
                      <span slot="title">导航四</span>
                    </el-menu-item>-->
        </el-menu>
        <el-container>
          <div class="myBread">
            <a-row type="flex" justify="end">
              <el-breadcrumb separator-class="el-icon-arrow-right" >
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                <el-breadcrumb-item>活动详情</el-breadcrumb-item>
              </el-breadcrumb>
            </a-row>
          </div>
          <el-main>
            <router-view/>
          </el-main>
          <el-footer>
            <a-row type="flex" justify="space-between">
              <a-col :span="12">
                <span style="font-weight: bolder; font-size: 0.7vw">七月酒店</span>
              </a-col>
              <a-col :span="12" align="right">
                <span style="font-weight: bolder; font-size: 0.7vw">Copyright ©2022.3.11 UlricaWolfKing  All Rights Reserved.</span>
              </a-col>
            </a-row>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  Container, Header,  Main, Footer, Menu, Submenu,
  MenuItem, Dropdown, DropdownMenu, DropdownItem, Breadcrumb, BreadcrumbItem, MenuItemGroup
} from "element-ui";
import {Avatar} from "ant-design-vue"
export default {
  name: 'HomeView',
  components: {
    "el-container" : Container,
    "el-main" : Main,
    "el-header" : Header,
    "el-menu" : Menu,
    "el-menu-item" : MenuItem,
    "el-submenu" : Submenu,
    "el-footer" : Footer,
    "el-dropdown" : Dropdown,
    "el-dropdown-menu" : DropdownMenu,
    "el-dropdown-item" : DropdownItem,
    "a-avatar" : Avatar,
    "el-breadcrumb":Breadcrumb,
    "el-breadcrumb-item" : BreadcrumbItem,
    "el-menu-item-group" : MenuItemGroup
  },
  data()
  {
    return {
      isCollapse: false,
      username: "admin",
      defaultActive: "1",
      menuDatas: [],
      defaultOpeneds: 1,
      breadcrumb: [],
    }
  },
  mounted()
  {
    this.initHomePageMenu();
  },
  methods: {
    async initHomePageMenu()
    {
      let menus = this.$store.state.menus;

      if (!menus)
      {
        const {data: {resCode, resData}} = await this.$http.get("/menu/menuanduser");
        menus = resData.menus;
      }
      menus = menus.filter(item => !item.type);
      let menuMap = new Map;
      menus.forEach((item) =>
      {
        menuMap.set(item.id, item);
      })
      let target = [];
      menus.forEach((item) =>
      {
        let parent = menuMap.get(item.parentId);
        if (!parent)
        {
          target.push(item);
        } else
        {
          if (!Array.isArray(parent.children))
          {
            parent.children = [];
          }
          parent.children.push(item);
        }
      });
      this.menuDatas = target;
    }
  }
}
</script>

<style>
.el-header, .el-footer {
  background-color: #191970;
  height: 4.5vh!important;
  line-height: 4.5vh!important;
  color: #ffffff;
}
.el-menu{
  width: 12.5vw;
  overflow: hidden;
}
.isCollapse{
  font-size: 2vh;
  color: #ffffff;
}
.el-main {
  background-color: #999999;
  height: 88.95vh;
  box-sizing: border-box;
  padding: 2vh 2vw;
}

body > .el-container {
  margin-bottom: 40px;
}
.el-menu{
  user-select: none;
}
.el-dropdown-link {
  cursor: pointer;
  color: #ffffff;;
}
.el-dropdown-link:hover {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.myBread{
  height: 2vh;
  background-color: #EBEEF5;
  box-shadow: 0 0 5px 3px #666;
  padding: 3px 30px;
}
</style>
